<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';

import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

import { Page } from '#/components/page';

const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref('<p>hello</p>');

const isLoading = ref(false);

const activeKey = ref('1');
const tabList = ref([
  { label: '用户协议', value: '1' },
  { label: '隐私协议', value: '2' },
  { label: '积分协议', value: '3' },
  { label: '接单协议', value: '4' },
  { label: '注销协议', value: '5' },
]);

const toolbarConfig = {
  excludeKeys: ['group-image', 'insertVideo', 'codeBlock', 'insertLink'],
};
const editorConfig = { placeholder: '请输入内容...' };

/**
 * 通过回调创建编辑器示例
 * @param editor
 */
function handleCreated(editor) {
  editorRef.value = editor;
}

onMounted(() => {
  isLoading.value = true;
  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
    isLoading.value = false;
  }, 1500);
});

onBeforeUnmount(() => {
  // 组件销毁时，也及时销毁编辑器
  const editor = editorRef.value;
  editor?.destroy();
});
</script>

<template>
  <Page content-class="h-full">
    <div class="h-full w-full rounded-lg bg-white p-2">
      <a-tabs v-model:active-key="activeKey">
        <a-tab-pane
          v-for="item in tabList"
          :key="item.value"
          :tab="item.label"
        />
      </a-tabs>
      <a-spin :spinning="isLoading">
        <a-flex gap="middle">
          <div class="rounded-lg border-[1px] border-solid border-gray-300 p-1">
            <Toolbar
              :default-config="toolbarConfig"
              :editor="editorRef"
              mode="simple"
              style="border-bottom: 1px solid #ccc"
            />
            <Editor
              v-model="valueHtml"
              :default-config="editorConfig"
              mode="simple"
              style="height: 600px; overflow-y: hidden"
              @on-created="handleCreated"
            />
          </div>
          <div
            class="flex h-[650px] w-[340px] flex-col rounded-3xl border-[1px] border-solid border-gray-300 px-4 py-6"
            v-dompurify-html="valueHtml"
          ></div>
        </a-flex>
      </a-spin>
    </div>
  </Page>
</template>
